<template>
    <div>


        <el-row :gutter="10">
            <el-card>

                <el-row :gutter="10">
                    <el-col :span="2">
                        <el-image :src="store.avatar" style="width: 70px;height: 70px"></el-image>
                    </el-col>


                    <el-col :span="5" style="margin-top: 20px">
                        <span style="font-size: 25px;">{{ this.store.name }}</span>
                    </el-col>

                    <el-col :span="17" style="margin-top: 25px">
                        <span style="font-size: 15px;display: inline">{{ this.store.detail }}</span>
                    </el-col>

                </el-row>


                <template>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="首页" name="first">

                            <el-row class="clearfix" style="margin-bottom: 5px">
                                <span style="font-weight: bold;font-size:25px">新品上新</span>
                            </el-row>

                            <el-row :gutter="20" class="el-row">
                                <el-col :span="6" style="margin-bottom: 20px" v-for="(product,index) in newProducts"
                                        :key="index">
                                    <el-card style="height: 350px;">
                                        <div @click="toProductInfo(product.id)">
                                            <div style="flex:1;text-align: center">
                                                <el-image style="width: 180px;height: 180px" fit="fit"
                                                          :src="product.image"></el-image>
                                            </div>
                                            <div style="flex:1;text-align: center;font-size: 15px;margin: 10px">{{
                                                product.name
                                                }}
                                            </div>
                                            <div style="flex:1;text-align: center;font-size: 20px;margin: 10px;color: #ff3e00">
                                                ￥{{
                                                product.price
                                                }}
                                            </div>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>


                            <el-row class="clearfix" style="margin-bottom: 5px">
                                <span style="font-weight: bold;font-size:25px">爆款推荐</span>
                            </el-row>

                            <el-row :gutter="20" class="el-row">
                                <el-col :span="6" style="margin-bottom: 20px"
                                        v-for="(product,index) in recommendedProducts"
                                        :key="index">
                                    <el-card style="height: 350px;">
                                        <div @click="toProductInfo(product.id)">
                                            <div style="flex:1;text-align: center">
                                                <el-image style="width: 180px;height: 180px" fit="fit"
                                                          :src="product.image"></el-image>
                                            </div>
                                            <div style="flex:1;text-align: center;font-size: 15px;margin: 10px">{{
                                                product.name
                                                }}
                                            </div>
                                            <div style="flex:1;text-align: center;font-size: 20px;margin: 10px;color: #ff3e00">
                                                ￥{{
                                                product.price
                                                }}
                                            </div>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>


                        </el-tab-pane>
                        <el-tab-pane label="全部商品" name="second">

                            <el-row :gutter="20" class="el-row">
                                <el-col :span="6" style="margin-bottom: 20px" v-for="(product,index) in products"
                                        :key="index">
                                    <el-card style="height: 350px;">
                                        <div @click="toProductInfo(product.id)">
                                            <div style="flex:1;text-align: center">
                                                <el-image style="width: 180px;height: 180px" fit="fit"
                                                          :src="product.image"></el-image>
                                            </div>
                                            <div style="flex:1;text-align: center;font-size: 15px;margin: 10px">{{
                                                product.name
                                                }}
                                            </div>
                                            <div style="flex:1;text-align: center;font-size: 20px;margin: 10px;color: #ff3e00">
                                                ￥{{
                                                product.price
                                                }}
                                            </div>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                    </el-tabs>
                </template>


            </el-card>
        </el-row>


    </div>
</template>


<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "StoreInfo",
    data() {
        return {
            store: {},
            storeId: '',
            activeName: 'first',

            products: [],
            newProducts: [],
            recommendedProducts: [],

            currentPage: 1,          // 当前页码
            pageSizes: [5, 10, 50, 100], // 每页显示条数
            pageSize: 5,             // 每页显示条数
            total: 0,                // 商品总数

        }
    },
    mounted() {
        // console.log(this.$route.query.id)

        // console.log(this.$route.matched[0].path)
        // console.log(this.$route.matched[1].path)
        // 获取到商家的ID
        this.storeId = this.$route.query.id
        // 如果没有参数的话，返回之前的页面
        if (this.storeId === '' || this.storeId === null || this.storeId === undefined) {
            this.$router.push(this.$route.matched[0].path)
        }
        // 根据商家ID查询商家的所有信息，包括他的商品
        this.loadStoreInfo()

        this.loadNewProducts()

        this.loadRecommendedProducts()
    },
    methods: {
        loadStoreInfo() {
            this.$request.post('/store/loadStoreInfoById?id=' + this.storeId).then(res => {
                console.log(res)
                if (res.code === '200') {
                    this.store = res.data
                    this.products = this.store.products
                    // 过滤出商品的状态为1 的商品集合
                    this.products = this.products.filter(item => item.status === 1)
                } else {
                    this.$message.error(res.msg)
                }
            })
        },


        // 加载商家的所有商品
        loadStoreProducts() {
            this.$request.post('/product/loadStoreProducts?currentPage=' + this.currentPage
                + '&pageSize=' + this.pageSize
                + '&id' + this.storeId).then(res => {
                if (res.code === '200') {
                    this.products = res.data.list
                    this.total = res.data.total
                } else {
                    this.$message.error(res.msg)
                }
            })
        },


        // 加载新品上新的商品
        loadNewProducts() {
            this.$request.post('/product/loadStoreNewProducts?id=' + this.storeId).then(res => {
                if (res.code === '200') {
                    this.newProducts = res.data
                    // console.log(this.newProducts)
                } else {
                    this.$message.error(res.msg)
                }
            })
        },

        loadRecommendedProducts() {
            this.$request.post('/product/loadRecommendedProducts?id=' + this.storeId).then(res => {
                if (res.code === '200') {
                    this.recommendedProducts = res.data
                } else {
                    this.$message.error(res.msg)
                }
            })
        },

        toProductInfo(id) {
            this.$router.push('/productInfo?id=' + id)
        }
        ,

        handleClick(tab, event) {
            console.log(tab, event);
        }
    }
})
</script>


<style scoped>

</style>